import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    alias: '/home_page',
    component: Home,
    props: route => ({
      food: route.query.food
    }),
    /* beforeEnter: (to,from,next) => {
      if (from.name === 'about') alert('这是从about页面来的~~')
      else alert('这不是从about页面来的')
      //next钩子必须调用,路由独享守卫就是这个
      next()
    } */
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //当访问到它的时候才去加载模块,import(../views/About.vue),一个promise 对象
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue'),
    props: {
       food: 'banana'
    },
    //路由源信息的使用
    meta: {
      title: '关于'
    }
  },
  {
    path: '/argu/:name',
    name: 'argu',
    component: () => import('@/views/Argu.vue'),
    //页面内部的属性,会以$route.params.name 作为属性(true)
    props: true,
    meta: {
      title: '参数'
    }
  }, 
  {
    path: '/count-to',
    name: 'count_to',
    meta: {
      title: 'count_to'
    },
    component: () => import('@/views/count-to.vue')
  },
  {
    path: '/split-pane',
    name: 'split_pane',
    meta: {
      title: 'split_pane'
    },
    component: () => import('@/views/split-pane.vue')
  },
  {
    path: '/parent',
    name: 'parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ],
    meta: {
      title: '父组件'
    }
  },
  {
    path: '/named_view',
    components: {
      default: () => import('@/views/Child.vue'),
      email: () => import('@/views/Email.vue'),
      tel: () => import('@/views/Tel.vue'),
    } 
  },
  {
    path: '/main',
    // redirect: '/'
    // redirect: {
    //   name: 'home'
    // }
    // redirect: to => {
    //   console.log(to)
    // }
    // redirect: to => {
    //   return {
    //     name: 'home'
    //   }
    // }
    // redirect: to => {
    //   return '/'
    // }
    redirect: to => '/'
  },
  {
    path: '/store',
    component: () => import('@/views/store.vue')
  },
  //404页面路由定义在最后边,优先级最低,*匹配规则,这个就是History 模式
  {
    path: '*',
    component: () => import('@/views/error_404.vue'),
  }
]